﻿@using Covenant.Models.Listeners
@model IEnumerable<Listener>
@{
    Layout = "_ListenerLayout";
    ViewData["Title"] = "Listeners";
    IEnumerable<ListenerType> ListenerTypes = ViewBag.ListenerTypes;
    IEnumerable<Profile> Profiles = ViewBag.Profiles;
}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
    <h1 class="h2">Listeners</h1>
</div>

<ul class="nav nav-tabs mb-3" id="listener-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="listeners-tab" data-toggle="tab" href="#listeners" role="tab" aria-controls="listeners" aria-selected="true">
            <span data-feather="headphones"></span>
            Listeners
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profiles-tab" data-toggle="tab" href="#profiles" role="tab" aria-controls="profiles" aria-selected="false">
            <span data-feather="settings"></span>
            Profiles
        </a>
    </li>
</ul>

<div class="tab-content" id="listeners-tab-content">
    <div class="tab-pane fade" id="listeners" role="tabpanel" aria-labelledby="listeners-tab">
        @{
            await Html.RenderPartialAsync("_ListenerTable", Model);
        }
        <a asp-controller="Listener" asp-action="Create" class="btn btn-primary">
            <span data-feather="plus"></span>
            Create
        </a>
    </div>
    <div class="tab-pane fade" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">
        @{
            await Html.RenderPartialAsync("../Profile/_ProfileTable", Profiles);
        }
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('#listeners-table').DataTable({
                "pageLength": 50,
                "info" : false,
                "lengthChange" : false,
                "searching" : false
            });
            $('#profiles-table').DataTable({
                "pageLength": 50,
                "info" : false,
                "lengthChange" : false,
                "searching" : false
            });
            $("#listeners-tab").tab('show');
        });
    </script>
}